<!--
 * @Description: 
 * @Author: chaixinyu
 * @Date: 2022-12-22 18:36:12
 * @LastEditors: 47
 * @LastEditTime: 2023-01-15 18:42:44
-->
<template>
  <div class="course-section">

    <!-- 有章节时 -->
    <div v-if="chapterInfo.length">
      <!-- 已完成任务点 -->
      <div class="task-point">
        <!-- {{chapterInfo}} -->
        <span class="finished">已经完成的任务点：{{ myOkTasKNum.OkTaskNum }}/{{courseTaskPointNum.my_course_taskPointNum}}</span>
        <van-progress :percentage="(myOkTasKNum.OkTaskNum/courseTaskPointNum.my_course_taskPointNum)*100" stroke-width="10" color="#73c68e" :show-pivot="false" class="course-progress"/>
      </div>

      <!-- 任务详情 -->
      <van-collapse v-model="activeNames" class="section-info" >

        <!-- 每一个大章节 -->
        <van-collapse-item  v-for="(chapterOne,oneIndex) in chapterInfo" :key="chapterOne.chapter_id">

          <!-- 主标题 -->
          <template #title>
            <div class="section-title">
              <span class="iconfont icon-anniu_guanbi title-icon" ></span>
              <span class="title-font">
                <!-- 2022年秋书写 "一国两制"实践新篇章 -->
                {{chapterOne.chapter_title}}
              </span>
            </div>
          </template>

          <!-- 每一小节 -->
          <div class="section-content" @click="goThisChapter(chapterTwo.chapter_id,oneIndex+1,twoIndex+1)" v-for="(chapterTwo,twoIndex) in chapterOne.chapterTwoList" :key="chapterTwo.chapter_id">
            <span class="iconfont icon-yuanxingxuanzhong" :class="{checked:chapterTwo.chapter_status == 1 ,unChecked:chapterTwo.chapter_status == 0}"></span>
            <span class="content-font">
              <!-- 1.1 时事政治 -->
              {{oneIndex+1}}.{{twoIndex+1}}
              {{chapterTwo.chapter_title}}
            </span>
          </div>
        </van-collapse-item>

      </van-collapse>
    </div>

    <!-- 没有章节时 -->
    <div class = "nullChapter" v-if="!chapterInfo.length">
        <van-empty description="该课程下暂时还没有设置章节" />
    </div>

  </div>
</template>

<script setup>
import { ref,onMounted } from 'vue';
import { Progress,Collapse, CollapseItem } from 'vant';
// 引入路由
import {useRouter} from 'vue-router'
// 引入仓库
import { useCourseStore } from '@/stores/course'
import { storeToRefs } from 'pinia'


//实例化仓库对象
const course = useCourseStore()

//解构方法
const { getChapterInfo,getCourseTaskPointNum,getMyOkTaskNumTheCourse } = course

//解构数据(如果想要处理响应式数据，使用storeToRefs)
const { chapterInfo,courseId ,courseTaskPointNum,myOkTasKNum} = storeToRefs(course)



onMounted(async () => {
  try {
    await getChapterInfo(courseId.value,1)
    await getCourseTaskPointNum(courseId.value)
    await getMyOkTaskNumTheCourse(courseId.value,1)
  } catch (error) {
    console.log(error.message);
  }
})



// 创建路由对象
const router = useRouter()
const activeNames = ref(['1']);

// 跳转到本章节页面
const goThisChapter = (chapterId,oneIndex,twoIndex) => {
  let index = oneIndex+"."+twoIndex
  router.push({
    name:'thischapter',
    query:{chapterId,index}
  })
}

</script>

<style lang="less" scoped>
html{
  background-color: rgb(255, 255, 255);
}
.course-section{
  
  .task-point{
    display: flex;
    flex-flow: row;
    float: left;
    height: 40px;
    width: 100%;
    background-color: rgb(255, 255, 255);
    font-size: 12px;
    // font-family: "宋体";
    line-height: 40px;

    .finished{
      margin-left: 10px;
    }
    .course-progress{
      width: 100px;
      margin: 15px;
    }
  }
  
  .section-info{
    // background-color: #f5f6f8;

    :deep(.van-cell--clickable){
      background-color: #f5f6f8;
      padding: 15px;

      .section-title{
      display: flex;
      flex-flow: row;
      .title-icon{
        font-size: 35px;
      }
      .title-font{
        width: 250px;
        margin-left: 10px;
      }
    }
    }

    :deep(.van-collapse-item__content ){
      padding: 0;
      padding-left: 9px;
      
      .section-content{
        padding: 8px;
        display: flex;
        flex-flow: row;
        border-bottom: 1px solid #f5f6f8;
        .checked{
          font-size: 20px;
          color: green;
        }
        .unChecked{
          font-size: 20px;
        }
        .content-font{
          margin-left: 8px;
          line-height: 30px;
          font-size: 13px;
        }
    }
    }
   
  }

  .nullChapter{

  }
}
</style>
